<template>
  <div  >
    <!--      标题-->
    <div class="title">送货员</div>
    <div style="text-align: right;margin-top: 10px;margin-right: 10px;">
      <JButton style="width: 120px;height: 50px;" type="success" @click="add">新增</JButton>
    </div>
    <div style="margin-top: 20px;">
      <div style="display: flex;flex-wrap: wrap;">
        <div class="item" v-for="(item, index) in state.namelist" :key="index" @click="del(index)">{{item.name}}</div>
      </div>
    </div>
    <tiny-dialog-box v-model:visible="state.show">
      <div style="width: 300px">
        <tiny-input v-model="state.name" placeholder="请输入名字" size="large"></tiny-input>
      </div>
      <div style="height: 50px;"></div>
      <div style="text-align: center;">
        <tiny-button  @click="savecontinue" type="info">保存并继续</tiny-button>
        <tiny-button  style="margin-left: 100px;" @click="saveclose">保存并关闭</tiny-button>
      </div>
      <div style="height: 100px;"></div>
    </tiny-dialog-box>
    <tiny-dialog-box v-model:visible="state.show1">
      <div style="width: 300px">
        <tiny-input v-model="state.name1" placeholder="请输入名字" size="large"></tiny-input>
      </div>
      <div style="height: 100px;"></div>
      <div style="text-align: center;">
        <tiny-button   style="margin-left: 100px;" @click="delshy" type="danger" size="large">删除送货员</tiny-button>
      </div>
      <div style="height: 50px;"></div>
    </tiny-dialog-box>
    <!--底部按钮-->
  </div>
</template>
<script setup>
import {ref, onBeforeMount} from "vue";
// 送货员
import tool from "@/utils/tool";
const state = ref({
  show: false,
  show1: false,
  name: '',
  name1: '',
  namelist: [],
  currentIndex: -1
})
onBeforeMount(() => {
  getList()
})
const getList = () => {
  tool.post('justdeliver/shy', {which: 'list'}).then(ret => {
    state.value.namelist = ret.data
  })
}
const add = () => {
  state.value.name = ''
  state.value.show = true

}
const savecontinue = () => {
  if(state.value.name) {
    tool.post('justdeliver/shy', {which: 'save', name: state.value.name}).then(ret => {
      if(ret.stat) {
        state.value.name = ''
        getList()
      }
    })
  }
  else {
    tool.err('名称不能为空')
  }
}
const saveclose = () => {
  if(state.value.name) {
    tool.post('justdeliver/shy', {which: 'save', name: state.value.name}).then(ret => {
      if(ret.stat) {
        state.value.name = ''
        getList()
        state.value.show = false
      }
    })
  }
  else {
    tool.err('名称不能为空')
  }
}
const save = () => {

}
const del = (i) => {
  state.value.show1 = true
  state.value.name1 = state.value.namelist[i].name
  state.value.currentIndex = i
}
const delshy = () => {
  if(state.value.currentIndex !== -1) {
    tool.post('justdeliver/shy', {which: 'del', name: state.value.namelist[state.value.currentIndex].name}).then(ret => {
      if(ret.stat) {
        state.value.name = ''
        getList()
        state.value.show1 = false
        state.value.currentIndex = -1
      }
    })

  }
}


</script>
<style scoped lang="scss">
.title {
  text-align: center;
  font-weight: bold;
  font-size: 22px;
  background-color: #01aaee;
  color: white;
  height: 40px;
  line-height: 40px;
}
.item {
  width: 150px;
  background: #fac20a;
  margin: 10px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 4px;
  color: white;
}
</style>